<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    @close="close"
  >
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-form layout="inline" class="ant-advanced-search-form">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="疑点名称" prop="ydmc">
              <a-input v-model='model.ydmc'/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="疑点状态" prop="ydzt">
              <j-dict-select-tag
                style="width: 185px"
                v-model="model.ydzt"
                dict-code="generate_type"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="疑点来源">
              <j-dict-select-tag style='width: 185px' v-model="model.ydlyCode"
                                 dict-code="ydly"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="记录时间">
              <j-date style='width: 100%' v-model='model.tjrq'></j-date>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="疑点编码">
              <span style="color: white"> {{ model.ydbm? model.ydbm:'系统生成' }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="疑点描述">
              <a-textarea :auto-size="{ minRows: 2, maxRows: 5 }" type="" style="width: 570px"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="法规制度" prop="fgzd">
              <a-select
                v-model="model.fgzd"
                mode="tags"
                style="width: 570px"
                option-label-prop="label"
              >
                <template v-for="(item,index) in regulation">
                  <a-select-option :value="item.title||''" :label="item.title" :key="item.id">
                    {{item.title}}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="疑点源数据">
              <span style="color: #ef6767;border-bottom: 1px solid #ef6767">/lwdwyj?id={{model.subEntpId}}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24">
          <a-form-model-item label="附件上传">
            <RuleUpload ref='fileUpload' :fileid='model.fileId'
                        @uploadFile="uploadFile"></RuleUpload>
          </a-form-model-item>
        </a-row>
        <img-upload ref="imgUpload" :dataURL="dataURL" :saveFile='saveFile'
                    @returnFile="(imgList)=>{ this.model.imgList = imgList }"></img-upload>
      </a-form>
    </div>
    <!-- table区域-end -->
  </j-modal>
</template>
<script>

  import {httpAction, getAction} from '@/api/manage'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import imgUpload from '../../../components/imgUpload'
  import RuleUpload from '../../../components/RuleUpload'
  import * as lodash from 'lodash'

  export default {
    name: 'YD',
    mixins: [JeecgListMixin],
    components: {imgUpload, RuleUpload},
    props: ['id'],
    data() {
      return {
        previewVisible: false,
        previewImage: '',
        fileList: [],
        title: '新增疑点',
        labelCol: {span: 4},
        wrapperCol: {span: 18},
        visible: false,
        isCheck: false,
        disableMixinCreated: true,
        saveFile: '/sys/common/uploadMultiBase64',
        regulation: [],
        model: {fileId: ''},
        url: {
          list: '/modelTeam/queryProjectList',
          regulation: '/sjzszhly/knowledgeRegulation/queryKnowledgeRegulation',
          add: "/sjxmzygl/sjWorkZtfaEveYidian/add",
        },
        dataURL: "",
      }
    },
    created() {
      this.getRegulation()
    },
    watch: {},
    methods: {
      show(record, dataURL) {
        this.model = {}
        this.model = lodash.cloneDeep(record)
        this.dataURL = dataURL
        this.visible = true
      },
      close(isSubmit) {
        if (isSubmit) {
          this.visible = false
          this.saveData()
        } else {
          this.visible = false
        }
      },
      getRegulation() {
        getAction(this.url.regulation).then((res) => {
          if (res.success && res.result.length > 0) {
            this.regulation = res.result
          } else {
            console.log(res)
          }
        })
      },
      saveData() {
        this.$refs.fileUpload.saveFile('sjyd')
      },
      uploadFile(id) {
        debugger
        this.model.fileId = id
        if (this.model.fgzd) {
          this.model.fgzd = this.model.fgzd.toString()
        } else {
          this.model.fgzd = ''
        }
        httpAction(this.url.add, {proId: this.id, ...this.model}, 'post').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
            this.visible = false
          } else {
            this.$message.error(res.message);
          }
        })
      }
    }
  }
</script>
<style lang="css" scoped>
  /deep/ .ant-modal-footer .ant-btn {
    background: transparent;
    color: #13D4D5;
    border: 1px solid #13D4D5;
  }

  /deep/ .ant-upload-select-picture-card {
    background-color: transparent;
  }

  /deep/ .ant-upload-text {
    color: #13D4D5;
  }

  /deep/ .anticon-plus {
    color: #13D4D5;
  }

  /deep/ .ant-upload-select .ant-btn {
    background: transparent;
    border: 1px solid #13D4D5;
    color: #13D4D5;
  }

  /deep/ .ant-upload-list {
    color: #13D4D5;

  }

  /deep/ .ant-select-selection {
    background-color: transparent;
    border: 1px solid #13D4D5;
    color: #13D4D5;
  }

  /deep/ .ant-upload-picture-card-wrapper {
    width: calc(100% - 112px) !important;
  }

  /deep/ .ant-calendar-picker:hover .ant-calendar-picker-clear {
    color: #13D4D5;
    background: transparent;
  }

  /deep/ .ant-calendar-range-picker-separator {
    color: #13D4D5 !important;
  }

  /deep/ .ant-table-tbody > tr.ant-table-row-selected td {
    color: #13D4D5;
    background: rgba(255, 255, 255, 0.4);
  }

  /deep/ .ant-input {
    border-color: #13D4D5;
    background: transparent;
    color: #13D4D5 !important;
  }

  /deep/ .ant-form-item {
    /*display: flex !important;*/
  }

  /deep/ .ant-form-item-label > label {
    color: #13D4D5 !important;
  }

  /deep/ .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
  /deep/ .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
  /deep/ .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
  /deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: rgba(255, 255, 255, 0.4);
    color: black !important;
  }

  /deep/ .ant-modal-header, /deep/ .ant-modal-title, /deep/ .ant-modal-close {
    background: transparent !important;
    color: #13D4D5;
  }

  /deep/ .ant-btn-primary {
    background-color: transparent !important;
    border-color: #1890FF !important;
  }

  /deep/ .ant-table-placeholder {
    background: transparent;
  }

  /deep/ .ant-empty-description {
    color: white;
  }

  /deep/ .ant-pagination-item-active {
    background: transparent;
    border-color: #13D4D5;
  }

  /deep/ .ant-pagination li a {
    color: white !important;
  }

  /deep/ .ant-pagination {
    color: white;
  }

  /deep/ .ant-table-thead tr th {
    color: white;
    background: transparent;
  }

  /deep/ .ant-table-tbody tr td {
    color: white;
    background: transparent;
  }

  /deep/ .ant-card {
    background-color: transparent;
    color: white;
  }

  /deep/ .ant-modal-content {
    background: url(~@/assets/hgxjc/lwdwyj/bg.png) no-repeat;
  }
</style>
<style lang="less" scoped>
  .ant-row {
    height: 100%;

    .ant-col {
      height: 100%;

      .ant-card {
        height: 100%;

        /deep/ .ant-card-body {
          padding: 15px;
        }
      }
    }

  }
</style>
